// var
@loading-prefix-cls     : x-loading;
@loading-dot-size-small : 12px;
@loading-dot-size       : 20px;
@loading-dot-size-large : 32px;

// mixins

// styles
.@{loading-prefix-cls} {
  color: @primary-color;
  vertical-align: middle;
  text-align: center;
  &__dot {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    background-color: @primary-color;
    .square(@loading-dot-size);
    animation: ani-loading-bounce 1s 0s ease-in-out infinite;
  }
  &-large &__dot {
    .square(@loading-dot-size-large);
  }
  &-small &__dot {
    .square(@loading-dot-size-small);
  }
  &-fix {
    .absolute-fullscreen;
    z-index: @zindex-loading;
    background-color: rgba(255,255,255,.85);
  }
  &-fix &__content {
    .absolute-transform-center;
  }
  &-fullscreen {
    position: fixed;
    z-index: @zindex-loading-fullscreen;
  }
  @keyframes ani-loading-bounce {
    0% { transform: scale(0); }
    100% { transform: scale(1); opacity: 0; }
  }
}
